<template>
  <div>
    <search-table
      :url="url"
      ref="searchtable"
      :columns="columns"
      :form="form"
      :xLength="1400"
    >
      <template slot="searchForm">
        <a-form layout="inline" :form="form">
          <a-form-item label="状态">
            <a-select
              style="width: 180px"
              v-decorator="['activityStatu']"
              :allowClear="true"
              placeholder="请选择"
              :options="allStatus"
            ></a-select>
          </a-form-item>
          <a-form-item label="活动名称">
            <a-input
              style="width: 180px"
              v-decorator="['activityName']"
              placeholder="请输入活动名称"
            >
            </a-input>
          </a-form-item>
          <a-form-item label="活动时间">
            <fast-range-picker v-decorator="['startDate-endDate']">
            </fast-range-picker>
          </a-form-item>
        </a-form>
      </template>
      <template slot="oprationRow">
        <permission authority="discount:activity:add">
          <a-button type="primary" icon="plus" @click="newActivity()"
            >新建活动</a-button
          >
        </permission>
      </template>
      <template slot="tableOperation" slot-scope="{ record }">
        <a-space>
          <permission
            authority="discount:activity:modify"
            v-if="record.activityStatu != 3"
          >
            <a
              href="javascript:;"
              class="text-primary"
              @click="newActivity(record, 'edit')"
              >编辑</a
            >
          </permission>
          <permission
            authority="discount:activity:modify"
            v-if="record.activityStatu == 3"
          >
            <a
              href="javascript:;"
              class="text-primary"
              @click="newActivity(record, 'view')"
              >查看</a
            >
          </permission>
          <permission authority="discount:activity:end">
            <a
              href="javascript:;"
              class="text-primary"
              @click="handleEndNow(record)"
              v-if="record.activityStatu == 2"
              >立即结束</a
            >
          </permission>
          <permission authority="discount:goods:page">
            <a
              href="javascript:;"
              class="text-primary"
              @click="handleCommodityManage(record)"
              >折扣商品管理</a
            >
          </permission>
          <permission authority="discount:activity:delete">
            <a
              href="javascript:;"
              class="text-danger"
              @click="deleteRows([record.id])"
              >删除</a
            >
          </permission>
        </a-space>
      </template>
    </search-table>
    <NewActivity
      :visible="newActivityVisible"
      :id="currentData.id"
      :isChoose="currentData.isChoose"
      @cancel="handleCancel"
      @submit="handleSaveSubmit"
      ref="newActivity"
    ></NewActivity>
  </div>
</template>

<script>
import NewActivity from "./components/NewActivity";

export default {
  components: {
    NewActivity,
  },
  data() {
    return {
      url: "goldenhome/seckill/admin_/discount/activity/page",
      form: this.$form.createForm(this, { name: "table_search" }),
      columns: [
        {
          title: "活动名称",
          dataIndex: "activityName",
          key: "activityName",
          width: 200,
        },
        {
          title: "活动时间",
          dataIndex: "activityTime",
          key: "activityTime",
          width: 240,
        },
        {
          title: "活动状态",
          dataIndex: "activityStatu",
          key: "activityStatu",
          customRender: (text) => {
            if (text == 1) {
              return "未开始";
            } else if (text == 2) {
              return "进行中";
            } else if (text == 3) {
              return "已结束";
            }
            return "";
          },
          width: 80,
        },
        {
          title: "是否参与活动",
          dataIndex: "enableMspage",
          key: "enableMspage",
          customRender: (text) => {
            if (text == 0) {
              return "否";
            } else if (text == 1) {
              return "是";
            }
            return "";
          },
          width: 80,
        },
        {
          title: "操作",
          dataIndex: "operation",
          scopedSlots: { customRender: "operation" },
          width: 180,
        },
      ],
      allStatus: [
        {
          value: "",
          label: "全部状态",
        },
        {
          value: 1,
          label: "未开始",
        },
        {
          value: 2,
          label: "进行中",
        },
        {
          value: 3,
          label: "已结束",
        },
      ],
      newActivityVisible: false,
      currentData: {},
    };
  },
  methods: {
    handleCancel() {
      this.newActivityVisible = false;
      this.currentData = {};
    },
    newActivity(record, type) {
      if (record && record.id) {
        this.currentData = record;
      }
      this.newActivityVisible = true;
      this.$refs.newActivity.handle = type;
    },
    handleSaveSubmit(data) {
      this.newActivityVisible = false;
      this.$refs.searchtable.refreshTable();
    },
    handleCommodityManage(record) {
      this.$router.push({
        name: "MarketingDiscountCommodityManage",
        query: {
          activityId: record.id,
          activityStatu: record.activityStatu,
        },
      });
    },
    //立即结束
    async handleEndNow(record) {
      let res = await this.$get(
        "goldenhome/seckill/admin_/discount/activity/end",
        {
          id: record.id,
        }
      );
      if (res && res.returnCode == "1000") {
        this.$message.success("结束成功");
        this.$refs.searchtable.refreshTable();
      }
    },
    deleteRows(ids) {
      this.$confirm({
        title: "删除提示",
        content:
          "确定删除该活动，删除后将不可恢复，若已开启活动则该活动将被强制下架",
        okText: "确认删除",
        cancelText: "取消",
        onOk: () => {
          console.log(ids);
          this.$post(
            "goldenhome/seckill/admin_/discount/activity/delete",
            ids
          ).then((res) => {
            if (res && res.returnCode == "1000") {
              this.$message.success("删除成功");
              this.$refs.searchtable.refreshTable();
            }
          });
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.disabled {
  pointer-events: none;
  color: #ccc;
}
</style>